.hamburger-menu {
    display: none; 
    align-items: center;
    cursor: pointer;
}
.header {
	background-color: var(--white);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    position: fixed;
    top: 0;
	left: 0;
    width: 100%;
    z-index: 1000;
    padding: 10px 0;
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.navbar-container {
	width: 100%;
    display: flex;
	gap: clamp(15px, 4vw, 60px);
	align-items: center;
	padding: 0 20px;
}

.navbar ul {
  display: flex;
  list-style: none;
  gap: clamp(10px, 1.5vw, 20px);
  justify-content: flex-start;
}

.navbar a {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 500;
  font-size: clamp(16px, 1.8vw, 25px);
  transition: color 0.3s;
  text-transform: capitalize;
}
.navbar a:hover {
	color: var(--primary-color);
}
.navbar-button {
	margin-left: auto;
    display: flex;
	align-items: center;
}
.navbar-button a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background-color: var(--secondary-color); 
    border-radius: 50%; 
    transition: background-color 0.3s;
}
.navbar-button a:hover {
    background-color: var(--primary-color); 
}
.scroll-down .header {
    transform: translateY(-100%); 
}

.scroll-up .header {
    transform: translateY(0); 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); 
}

#logo img{
  display: block;
  max-height: 55px;
  width: auto;
  margin: 0;
  transition: height 0.35s, background-color 0.35s, font-size 35s;
}
#logo img:hover {
	transform: scale(1.03)
}
.png-responsive {
	display: block;
}
#logo img, 

.navbar-button img,

.hamburger-menu img {
    pointer-events: none;    
    -webkit-user-drag: none; 
    user-select: none;       
}
@media (max-width: 820px) {
    
    .hamburger-menu {
        display: flex !important;
        position: absolute !important;
        left: 20px;
        cursor: pointer;
    }

    .navbar {
        display: none !important;    
        position: absolute;
        top: 100%;                   
        left: 20px;                  
        width: 250px;                
        background-color: var(--white);
        border-radius: 12px;         
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); 
        padding: 20px;
        z-index: 999;
    }
 
    .navbar.active {
        display: block !important;
        animation: scendiMenu 0.3s ease-out forwards !important;
    }

    .navbar ul {
        flex-direction: column !important;
        align-items: flex-start !important; 
        gap: 15px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .navbar a {
        font-size: 18px !important; 
        width: 100%;
        display: block;
        padding: 5px 0;
    }

    .navbar-container {
        position: relative;
        justify-content: center !important;
        padding: 0 20px !important;
    }
    
    #logo {
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .navbar-button {
        display: flex !important;
        position: absolute !important;
        right: 20px !important;
        margin-left: 0 !important;
        gap: 15px !important;
    }
	.hide-on-mobile {
        display: none !important;
    }
}
@keyframes scendiMenu {
    from {
        opacity: 0;
        transform: translateY(-10px); 
    }
    to {
        opacity: 1;
        transform: translateY(10px);  
    }
}
}